<template>
    <div class="graph space-full"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'Graph',
  mounted () {
    this.makeChart()
  },
  methods: {
    makeChart () {
      const myChart = echarts.init(document.querySelector('.graph'))
      const symbol = 'image://'
      const symbolSize = 20
      const data = [
        {
          name: 'center',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [300, 300]
        },
        {
          name: 'left1',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [0, 0]
        },
        {
          name: 'left2',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [0, 200]
        },
        {
          name: 'left3',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [0, 400]
        },
        {
          name: 'left4',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [0, 600]
        },
        {
          name: 'right1',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [600, 0]
        },
        {
          name: 'right2',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [600, 300]
        },
        {
          name: 'right3',
          symbol,
          symbolSize,
          fixed: true,
          draggable: false,
          value: [600, 600]
        }
      ]
      const lines = [
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          effect: {
            show: true,
            smooth: true,
            trailLength: 0,
            symbol: 'arrow',
            color: 'red',
            symbolSize: 8,
            period: 4,
            loop: true
          },
          lineStyle: {
            normal: {
              curveness: -0.2,
              color: 'red',
              opacity: 0.5,
              width: 1
            }
          },
          data: [{
            coords: [
              [300, 300],
              [0, 600]
            ]
          }]
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          effect: {
            show: true,
            smooth: true,
            trailLength: 0,
            symbol: 'arrow',
            color: 'red',
            symbolSize: 8,
            period: 4,
            loop: true
          },
          lineStyle: {
            normal: {
              curveness: -0.1,
              color: 'red',
              opacity: 0.5,
              width: 1
            }
          },
          data: [{
            coords: [
              [300, 300],
              [0, 400]
            ]
          }]
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          effect: {
            show: true,
            smooth: true,
            trailLength: 0,
            symbol: 'arrow',
            color: 'red',
            symbolSize: 8,
            period: 4,
            loop: true
          },
          lineStyle: {
            normal: {
              curveness: 0.1,
              color: 'red',
              opacity: 0.5,
              width: 1
            }
          },
          data: [{
            coords: [
              [300, 300],
              [0, 200]
            ]
          }]
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          effect: {
            show: true,
            smooth: true,
            trailLength: 0,
            symbol: 'arrow',
            color: 'red',
            symbolSize: 8,
            period: 4,
            loop: true
          },
          lineStyle: {
            normal: {
              curveness: 0.2,
              color: 'red',
              opacity: 0.5,
              width: 1
            }
          },
          data: [{
            coords: [
              [300, 300],
              [0, 0]
            ]
          }]
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          effect: {
            show: true,
            smooth: true,
            trailLength: 0,
            symbol: 'arrow',
            color: 'red',
            symbolSize: 8,
            period: 4,
            loop: true
          },
          lineStyle: {
            normal: {
              curveness: -0.2,
              color: 'red',
              opacity: 0.5,
              width: 1
            }
          },
          data: [{
            coords: [
              [300, 300],
              [600, 0]
            ]
          }]
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          effect: {
            show: true,
            smooth: true,
            trailLength: 0,
            symbol: 'arrow',
            color: 'red',
            symbolSize: 8,
            period: 4,
            loop: true
          },
          lineStyle: {
            normal: {
              curveness: 0,
              color: 'red',
              opacity: 0.5,
              width: 1
            }
          },
          data: [{
            coords: [
              [300, 300],
              [600, 300]
            ]
          }]
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          effect: {
            show: true,
            smooth: true,
            trailLength: 0,
            symbol: 'arrow',
            color: 'red',
            symbolSize: 8,
            period: 4,
            loop: true
          },
          lineStyle: {
            normal: {
              curveness: 0.2,
              color: 'red',
              opacity: 0.5,
              width: 1
            }
          },
          data: [{
            coords: [
              [300, 300],
              [600, 600]
            ]
          }]
        }
      ]
      const option = {
        xAxis: {
          show: true,
          min: -100,
          max: 700
        },
        yAxis: {
          show: true,
          min: -100,
          max: 700
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            data
          }
        ].concat(lines)
      }
      myChart.setOption(option)
    }
  }
}
</script>
